<template>
  <view class="main-page detail-page">
    <view class="height20"></view>
    <view class="detail">
      <view class="detail-title">工单信息</view>
      <view class="box-info">
        <view class="box-text">办结情况：<text :class="detail.completionStatus === false ? 'is-red' : 'is-gray'">{{
          detail.completionStatus | getDictTxt(statusList) }}</text></view>
        <view class="box-text">工单编号：{{ detail.number || "--" }}</view>
        <view class="box-text">客户名称：{{ detail.customName || "--" }}</view>
        <view class="box-text">联系方式：{{ detail.customPhone || "--" }}</view>
        <view class="box-text">工单类型：{{ detail.billType | getDictTxt(typeList) }}</view>
        <view class="box-text" v-if="detail.billTheme">工单主题：{{ detail.billTheme || "--" }} -
          {{ detail.billThemeSub || "--" }}</view>
        <view class="box-text" v-else>工单主题：--</view>
      </view>
      <view class="height40"></view>
      <view class="detail-title">工单内容</view>
      <view class="box-info">
        <view class="box-text">{{ detail.billContent || "--" }}</view>
      </view>
      <view class="height40"></view>
      <view class="detail-title">工单流程</view>
      <view class="box-info">
        <view class="box-text">创建时间：{{ detail.createTime | getDate }}</view>
        <view class="box-text">到期时间：<text class="is-red">{{
          detail.endTime | getDate
        }}</text></view>
        <view class="box-text">接单人：{{ detail.receivingMan || "--" }}</view>
        <view class="box-text">接单时间：{{ detail.receivingTime | getDate }}</view>
        <view class="box-text" v-if="detail.completionStatus">办结时间：{{ detail.completionTime | getDate }}</view>
      </view>
      <view class="height20"></view>
      <view class="form-item align-center flex-center">
        <view :class="detail.completionStatus ? 'is-disabled main-btn' : 'main-btn'" style="margin-right: 40rpx"
          @click="submit">办结</view>
        <view :class="detail.completionStatus ? 'is-disabled main-btn' : 'main-btn'" style="margin-right: 40rpx"
          @click="transfer">转让</view>
        <view class="main-btn-plain" @click="goBack">返回</view>
      </view>
      <view class="height40"></view>
    </view>
    <view class="height20"></view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="input" title="输入办结说明" v-modal="description" placeholder="请输入办结说明"
        @confirm="dialogInputConfirm"></uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="dialog" type="dialog">
      <view style="border-radius: 20rpx; background-color: #fff">
        <view style="padding: 60rpx 20rpx 40rpx">
          <uni-section title="负责部门">
            <view class="uni-px-5 uni-pb-5">
              <uni-data-select v-model="deptId" :localdata="deptList"></uni-data-select>
            </view>
          </uni-section>
          <uni-section title="转让说明">
            <view class="uni-px-5 uni-pb-5">
              <uni-easyinput v-modal="description" placeholder="请输入转让说明" />
            </view>
          </uni-section>
        </view>
        <view class="uni1-dialog-button-group">
          <view class="uni1-dialog-button" @click="cancel">
            <view class="uni1-dialog-button-text"> 取消 </view>
          </view>
          <view :class="'uni1-dialog-button uni1-border-left'" @click="transferFn">
            <view class="uni1-dialog-button-text uni1-button-color"> 确定 </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { baseUrl, getDictTxt, getDate } from "@/static/js/utils.js";
import { getDict, getDept } from "@/api/system";
import { getDetail, completionBill, otherTransfer } from "@/api/hotline";

export default {
  name: "claimDetail",
  components: {},
  props: {},
  data() {
    return {
      baseUrl,
      detail: {},
      current: 0,
      statusList: [],
      typeList: [],
      deptId: undefined,
      description: "",
      deptList: [],
    };
  },
  computed: {},
  filters: { getDictTxt, getDate },
  methods: {
    getDict() {
      getDict({
        data: { keyword: "order_completion_status" },
        callback: ({ data }) => {
          this.statusList = data;
        },
      });
      getDict({
        data: { keyword: "hotline_bill_type" },
        callback: ({ data }) => {
          this.typeList = data;
        },
      });
      getDept({
        callback: ({ data }) => {
          this.deptList = data;
        },
      })
    },
    getDetail(id) {
      getDetail({
        data: { id },
        callback: ({ data }) => {
          this.detail = data;
        },
      });
    },
    submit() {
      if (this.detail.completionStatus) {
        return;
      }
      this.description = "";
      this.$refs.inputDialog.open();
    },
    dialogInputConfirm() {
      if (!this.description) {
        uni.showToast({
          icon: 'none',
          title: "请输入办结说明",
        });
        return;
      }
      uni.showLoading({
        title: "办结中，请稍等",
      });
      completionBill({
        data: {
          id: this.detail.id,
          deptId: 0,
          msg: this.description,
          description: this.description,
        },
        callback: () => {
          uni.hideLoading();
          this.submitFlag = true;
          uni.showToast({
            icon: "none",
            title: "办结成功",
          });
          this.getDetail(this.detail.id);
          // setTimeout(() => {
          //   this.goBack();
          // }, 1000);
        },
      });
    },
    transfer() {
      if (this.detail.completionStatus) {
        return;
      }
      this.deptId = undefined;
      this.description = "";
      this.$refs.dialog.open();
    },
    transferFn() {
      if (!this.deptId) {
        uni.showToast({
          icon: 'none',
          title: "请选择负责部门",
        });
        return;
      }
      if (!this.description) {
        uni.showToast({
          icon: 'none',
          title: "请输入转让说明",
        });
        return;
      }
      uni.showLoading({
        title: "转让中，请稍等",
      });
      otherTransfer({
        data: {
          id: this.detail.id,
          deptId: this.deptId,
          msg: this.description,
          description: this.description,
        },
        callback: () => {
          uni.hideLoading();
          this.submitFlag = true;
          uni.showToast({
            icon: "none",
            title: "转让成功",
          });
          this.$refs.dialog.close();
          this.getDetail(this.detail.id);
          // setTimeout(() => {
          //   this.goBack();
          // }, 1000);
        },
      });
    },
    cancel() {
      this.$refs.dialog.close();
    },
    goBack() {
      uni.navigateBack();
    },
  },
  watch: {},
  onLoad(params) {
    console.log(params);
    this.getDict();
    this.getDetail(params?.id);
    return;
    try {
      // #ifdef APP-NVUE
      const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
      // #endif
      // #ifndef APP-NVUE
      const eventChannel = this.getOpenerEventChannel();
      // #endif
      // eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
      // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
      if (eventChannel) {
        eventChannel.on("setData", ({ data }) => {
          if (this.judgeLogin()) {
            this.detail = data;
          }
        });
      }
    } catch (error) {
      uni.navigateBack();
    }
    // this.getUserInfoFn((userinfo) => {
    //   this.form.personName = userinfo.personName;
    //   this.form.personPhone = userinfo.personPhone;
    //   this.form.local = userinfo.local;
    // });
  },
  onReady() {},
};
</script>

<style lang="scss" scoped>
@import './style/orderDetail.scss';
</style>
